<template>
  <q-chip
    @mouseover="onOver"
    @mouseout="onOut"
    @click="onClick"
    :style="`color:${isHover ? lang.color : defaultColor};background:${
      isHover ? lang.backgroundColor : defaultBackgroundColor
    }`"
    class="chip"
    square
    size="10px"
    clickable
    >{{ $t(`common.lang.${lang.code}`) }}</q-chip
  >
</template>
<script lang="ts">
import { defineComponent, ref, watch } from 'vue';
import LanguageConfig from 'src/models/LanguageConfig';
import { useGlobalStore } from 'stores/global-store';

export default defineComponent({
  props: {
    code: {
      type: String,
      required: true,
    },
    active: {
      type: Boolean,
      default: false,
    },
  },
  emits: ['click'],
  setup(props, { emit }) {
    const globalStore = useGlobalStore();
    const languageConfig = globalStore.languageConfig;
    const lang = ref<LanguageConfig>(new LanguageConfig());
    if (languageConfig.length > 0) {
      let config = languageConfig.find((item) => item.code === props.code);
      if (config) {
        lang.value = config;
      } else {
        console.log(`can't find lang config: ${props.code}`);
      }
    }
    const isHover = ref(false);
    const defaultColor = ref('#b7b7b7');
    const defaultBackgroundColor = ref('rgba(16, 16, 16, 0.8)');
    if (props.active) {
      isHover.value = true;
    }
    watch(
      () => props.code,
      () => {
        let config = languageConfig.find((item) => item.code === props.code);
        if (config) {
          lang.value = config;
        } else {
          console.log(`can't find lang config: ${props.code}`);
        }
      }
    );
    return {
      isHover,
      lang,
      defaultColor,
      defaultBackgroundColor,
      onOver() {
        if (!props.active) {
          isHover.value = true;
        }
      },
      onOut() {
        if (!props.active) {
          isHover.value = false;
        }
      },
      onClick(event: MouseEvent) {
        emit('click', event);
      },
    };
  },
});
</script>
<style lang="sass" scoped>

.chip
  padding: 0px 6px
  cursor: default
  margin: 0px
  height: 18px
</style>
